<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { storePlayer } from '@/stores/music'
import { storeSearch } from '@/stores/search'
import type { Music } from '@/service/AudioController'
import { musicApi } from '@/api/resume'
import { WEB_URL } from '@/api/env'

// 在组件挂载时首次获取数据
onMounted(async () => {
    getSongs()
})

// 假设这是从服务端获取的歌曲列表数据
let songs = ref([])
let page = ref(1)

const playerStore = storePlayer()
const searchStore = storeSearch()

function getSongs() {
    musicApi.list(page.value).then(res => {
        songs.value = res
    })
}

function play(row: Music) {
    row.url = WEB_URL + '/' + row.url
    playerStore.player.playMusic(row)
}
function del(row) {
  console.log(row)
  musicApi.del(row.name).then(res => {
    search()
  })
}
function search() {
    musicApi.search(searchStore.search).then(res => {
        songs.value = res
    })
}
watch(
    () => searchStore.search,
    (newValue, oldValue) => {
        search()
    }
)
</script>

<!-- SongList.vue -->
<template>
    <el-row :span="24" style="width: 100%">
        <!-- 表格内容 -->
        <el-table :data="songs" border class="infinite-list" @row-dblclick="play">
            <el-table-column prop="name" label="标题"></el-table-column>
            <el-table-column prop="singer" label="歌手"></el-table-column>
        </el-table>
    </el-row>
</template>

<style scoped>
/* 自定义样式 */
.infinite-list {
    height: 400px;
    list-style: none;
    width: 100%;
    overflow: auto;
}
.infinite-list-item {
    width: 100%;
}

/* 设置滚动条的宽度和颜色 */
::-webkit-scrollbar {
    width: 5px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #efefef;
    border-radius: 5px;
}

/* 当鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #d3d3d3;
}
</style>
